<template>
  <!-- 父容器 -->
  <div class="today-deal-section">
    <div class="today-deal-layout">
      <div class="today-deal-box">
         <!-- 左侧文案区 -->
        <div class="deal-text">
          <div class="text-content">
          <h2 class="deal-title">TODAY DEAL’S</h2>
          <p class="deal-subtitle">Sale up to 70% Off</p>
          <p class="deal-desc">
            Donec nec justo eget felis facilisis fermentum. 
            Aliquam porttitor mauris sit amet orci.
          </p>
        </div>
        </div>
        <!-- 右侧产品区 -->
        <div class="deal-product">
          <div class="deal-product-wrap">
            <!-- 右侧背景图容器：占 90% 宽度靠右 -->
            <div class="deal-product-bg">
              <img src="@/assets/images/layer-deal.jpg" alt="deal-bg" class="bg-img">
            </div>

            <!-- 产品详情容器 -->
            <!-- <div class="deal-product-details">
                <DealProductCard :product="mockProduct"/>
            </div> -->

            <div class="deal-product-details">
              <el-carousel 
                height="300px"  
                indicator-position="outside"
                arrow="always"
                class="custom-carousel"
              >
                <!-- 轮播项1 -->
                <el-carousel-item>
                  <div class="carousel-content"> 
                    <DealProductCard :product="mockProduct"/>
                  </div>
                </el-carousel-item>
                <!-- 轮播项2 -->
                <el-carousel-item>
                  <div class="carousel-content red-bg">
                    <DealProductCard :product="anotherProduct"/>  
                  </div>
                </el-carousel-item>
              </el-carousel>
             </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DealProductCard from './DealProductCard.vue';
const mockProduct = ref({
  image: new URL('@/assets/images/14-370x370.jpg', import.meta.url).href,
  rating: 4,
  title: 'STERLING SLIVER',
  desc: 'Lorem ipsum dolor sit amet, feugiat delicata liberavisse.',
  oldPrice: 130,
  price: 98
});
// 第二个产品数据测试
const anotherProduct = ref({
  image: new URL('@/assets/images/15-370x370.jpg', import.meta.url).href,
  rating: 5,
  title: 'GOLDEN RING',
  desc: 'Another amazing deal for today only.',
  oldPrice: 200,
  price: 120
});
</script>

<style scoped>
/*  父容器 */
.today-deal-section {
  width: 100%; 
  min-height: 600px; /* 示例高度，可按需调整 */
  margin: 0 auto;
  background-color: #f1f1f1; 
}

/* 占父容器 64% 的布局容器 */
.today-deal-layout {
  width: 64%;
  margin: 0 auto; /* 水平居中 */
  position: relative; /* 开启相对定位 */
}
/* 铺满 today-deal-layout 的盒子 */
.today-deal-box {
  display: flex;
  height: 100%;
  position: relative;
  padding: 50px 0;
}

/* 左侧文案区 */
.deal-text {
  position: absolute; /* 绝对定位 */
  left: 0; /* 贴左 */
  top: 70px; /* 与顶部间距（和右侧产品区对齐） */
  width: 40%; 
  padding: 20px; 
  box-sizing: border-box;
  margin-top: 160px;
}
/* 文字内容容器 */
.text-content {
  text-align: left; 
  max-width: 80%; /* 限制最大宽度，避免过宽 */
}
.deal-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}
.deal-subtitle {
  font-size: 24px;
  color: #999;
  margin-bottom: 15px;
}
.deal-desc {
  line-height: 1.6;
  color: #666;
}

/* 右侧产品区：占剩余 60% 宽度，高度满父容器 */
.deal-product {
  width: 70%; 
  margin-left: auto; /* 让产品区靠右 */
  height: 100%;
  padding: 66px 15px 75px; 
  box-sizing: border-box;
}

/* 居中容器：占满 padding 后空间 */
.deal-product-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 背景图容器：靠右、占 90% 宽度 */
.deal-product-bg {
  width: 90%;
  float: right; 
  height: 100%;
}
.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 覆盖容器且保持比例 */
}

/* 去掉轮播箭头 */
:deep(.el-carousel__arrow) {
  display: none;
}
/*  产品详情容器：带内外边距 */
.deal-product-details {
  height: 340px;
  position: absolute;
  top: 75px; 
  right: 50px;
  bottom: 75px;
  left: 0;
  padding: 20px 20px 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.custom-carousel {
  width: 100%;
}
.carousel-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red-bg {
  border-radius: 4px;
  padding: 10px;
}
</style>